<!--
 * @Descripttion: 啦啦啦哈哈哈
 * @version: 
 * @Author: lsy
 * @Date: 2021-09-22 14:28:23
 * @LastEditors: liushengyan
 * @LastEditTime: 2022-06-09 16:44:10
-->
<template>
  <div class="login_contain">
    <i>
      <h2 style="color: rgb(61, 191, 214)">welcome&nbsp;vue3.x</h2>
    </i>
    <el-form
      :model="loginForm"
      :rules="rules"
      ref="loginRef"
      @keyup.enter="onSubmit"
    >
      <el-form-item prop="username">
        <el-input
          placeholder="请输入用户名"
          v-model="loginForm.username"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="loginForm.password"
          show-password
        />
      </el-form-item>
      <el-form-item prop="code" style="display: flex">
        <el-input
          style="width: 60%"
          v-model="loginForm.code"
          placeholder="请输入验证码"
        />
        &emsp;
        <img
          style="height: 33px"
          :src="`data:image/gif;base64,${captchaImage}`"
          @click="getCodeImg()"
        />
      </el-form-item>
      <el-form-item>
        &emsp;&emsp;&emsp;
        <el-button type="primary" @click="onSubmit">&emsp;登录&emsp;</el-button>
        <el-button @click="reset">&emsp;重置&emsp;</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>


const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};

const loginForm = reactive({
  username: "admin",
  password: "admin123",
  code: "",
});

const captchaImage = ref(null);
const getCodeImg = async () => {
  var res = await VE_API.system.captchaImage();
  captchaImage.value = res.data.img;
};

getCodeImg();

const loginRef = ref(null);
const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();

const onSubmit = () => {
  loginRef.value.validate(async (valid) => {
    if (valid) {
      store
        .dispatch("app/login", loginForm)
        .then(() => {
          ElMessage({
            message: "登录成功",
            type: "success",
          });
          router.push({ path: "/" });
        })
        .catch(() => {
          getCodeImg();
        });
    }
  });
};

const reset = () => {
  loginRef.value.resetFields();
};
</script>

<style lang="scss" scoped>
.login_contain {
  width: 300px;
  padding: 0px 30px;
  background: rgba(129, 173, 214, 0.5);
  position: absolute;
  top: 45%;
  right: 20%;
}
</style>
